<template>
  <div class="wrap">
    <!-- 左边图片 -->
    <div style="width: 555px; padding: 0">
      <img src="../assets/image/0yuan.webp" alt="" class="img" />
    </div>
    <!-- 中间搜索 -->
    <div style="width: 700px">
      <div class="mt-4">
        <el-input v-model="input3" placeholder="Please input" class="input-with-select">
          <template #prepend>
            <el-select v-model="select" placeholder="全部" style="width: 80px">
              <el-option label="全部" value="1" />
              <el-option label="H5" value="2" />
              <el-option label="海报" value="3" />
              <el-option label="长页" value="4" />
              <el-option label="表单" value="5" />
              <el-option label="互动" value="6" />
              <el-option label="电子画册" value="7" />
              <el-option label="视频" value="8" />
              <el-option label="解决方案" value="9" />
            </el-select>
          </template>
          <template #append>
            <el-button type="primary" :icon="Search"></el-button>
          </template>
        </el-input>
        <div style="width: 450px; height: 40px; margin: 0 auto">
          <ul
            style="
              width: 100%;
              display: flex;
              justify-content: space-between;
              list-style-type: none;
            "
          >
            <li>邀请函</li>
            <li>婚礼邀请函</li>
            <li>企业宣传册</li>
            <li>个人简历</li>
            <li>h5</li>
            <li>乔迁</li>
            <li>校庆</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 右边日历 -->
    <div style="" class="mask">
      <div
        class="box-inner"
        data-v-3dbf089b=""
        style="display: flex; text-align: center; align-items: center"
      >
        <div class="time" data-v-3dbf089b="">
          <div class="time-date" data-v-3dbf089b="">
            <span class="day" data-v-3dbf089b="">{{ day }}</span>
            <span class="month" data-v-3dbf089b="">/{{ yue }}</span>
            <span class="year" data-v-3dbf089b="">&nbsp;&nbsp;{{ nian }}</span>
          </div>
          <div class="time-cn" data-v-3dbf089b="">周三 农历冬月初一</div>
        </div>
        <div
          data-v-3dbf089b=""
          class="common-banner calendar-banner"
          style="
            display: flex;
            align-items: center;
            text-align: center;
            padding: 0 5px;
            margin-top: 5px;
          "
        >
          <img
            data-v-3dbf089b=""
            src=""
            alt="日历标识"
            _tracker_click_="_tracker_click_"
            style="width: 25px; height: 25px"
          />
          <div data-v-3dbf089b="">国家公祭日</div>
        </div>
            <div class="box">
      <iframe
        src="//calendar.eqxiu.com/cl/mini?full=1"
        width="1200"
        height="463"
        frameborder="0"
        title="calendar"
        class="iframe"
        data-v-3dbf089b=""
      ></iframe>
    </div>
      </div>
    </div>

  </div>
  
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const select = ref('')
// 年月日的获取
const day= new Date().getDate()
console.log(day,'=====今天');
const nian=new Date().getFullYear()
console.log(nian,'=====今年');
const yue=new Date().getMonth()+1
console.log(yue,'=====月份');

console.log("今天是" + nian + "年" + yue + "月" + day + "号");

// const day2=

</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  display: flex;
  
}
.img {
  width: 465px;
  height: 80px;
  padding: 0 71px;
}
.el-input {
  border: 1px solid #1261ff;
  margin-top: 6px;
}
.el-option {
  background: #fff;
  color: #000;
}
ul {
  li {
    line-height: 40px;
    text-align: center;
  }
}
.box {
  position: absolute;
  top: 68px;
  right: -221px;
  background: #fff;
  z-index: 99;
  display: none;
}
.mask {
  margin-left: 96px;
  border: 1px solid #ece7e7;
  border-radius: 6px;
  z-index: 99;
  margin-bottom: 20px;
  position: relative;
  width: 260px;
}
.mask:hover{
  .box{
    display: block;
  }
}
</style>
